<!-- 商品信息 -->
<div class="space-y-6">
    <div>
        <!-- 商品标题和操作按钮 -->
        <div class="flex items-start  mb-4">
            <h1 class="text-xl font-bold text-gray-800 leading-tight flex-1 mr-4">{$goods.name}</h1>
        </div>
        <!-- 价格 -->
        <div class="flex items-center space-x-4 mb-6">

            <!-- 已购买状态显示在价格位置 -->
            <div class="flex items-center space-x-3">
                <span class="text-lg price-container text-blue-600">
                    <span class="currency-symbol text-sm ">{:conf('site_currency_symbol')}</span>
                    <span class="text-2xl price-number font-semibold">{$goods.price}</span>
                </span>
            </div>
            {if $goods.original_price && $goods.original_price != $goods.price}
            <span class="text-lg text-gray-400 line-through price-container">
                <span class="currency-symbol">{:conf('site_currency_symbol')}</span>
                <span class="price-number">{$goods.original_price}</span>
            </span>
            {/if}
        </div>
    </div>

    <!-- 商品描述 -->
    {if $goods.description}
    <div class="  pt-6">
        <h3 class="text-lg font-semibold text-gray-800 mb-3">商品描述</h3>
        <div class="text-gray-600 leading-relaxed">
            {$goods.description|raw}
        </div>
    </div>
    {/if}

    <!-- 购买操作 -->
    <div class="  pt-6 space-y-4">
        <!-- 操作按钮 -->
        <div class="flex space-x-4">
            {if $goods.is_free}
            <div class="flex-1 bg-green-100  text-green-800 py-3 px-6 rounded-sm text-center font-medium">
                <i class="fas fa-gift mr-2"></i>
                免费资源
            </div>
            {elseif $goods.paid_content_type && $goods.has_paid}
            <!-- 已购买用户显示查看内容按钮 -->
            <!-- <div class="flex-1 bg-blue-100 text-blue-800 py-3 px-6 rounded-sm text-center font-medium">
                    <i class="fas fa-eye mr-2"></i>
                    查看内容
                </div> -->
            {elseif !empty($goods.price) && $goods.paid_content_type}
            <!-- 有付费内容且未购买时显示购买按钮 -->
            {if $user_id}
            <!-- 已登录用户 -->
            <button onclick="buyNow()"
                class="flex-1 bg-blue-500 text-white py-3 px-6 rounded-sm hover:bg-blue-600 transition-colors font-medium">
                <i class="fas fa-shopping-cart mr-2"></i>
                立即购买 ¥{$goods.price}
            </button>
            {else}
            <!-- 未登录用户显示两个购买选项 -->
            <div class="flex items-center space-x-4 flex-1">
                <button onclick="loginThenBuy()"
                    class="bg-blue-500 text-white py-2 px-4 rounded-sm hover:bg-blue-600 transition-colors text-sm font-medium"
                    title="登录后购买，订单将同步到您的账户，方便管理和查看">
                    <i class="fas fa-user mr-1"></i>
                    登录购买
                </button>

                <span class="text-sm text-gray-400">或</span>

                <a href="{:_url_('pay.preview', ['id' => $goods.id])}" target="_blank"
                    class="text-blue-600 hover:text-blue-800 underline text-sm font-medium transition-colors">
                    <i class="fas fa-external-link-alt mr-1"></i>免登录购买
                </a>
            </div>

            <!-- 购买说明 - 悬停显示 -->
            <div class="mt-4 flex justify-center">
                <div class="relative group">
                    <button
                        class="p-2 text-gray-500 hover:text-blue-500 transition-colors rounded-full hover:bg-blue-50">
                        <i class="fas fa-info-circle text-lg"></i>
                    </button>
                    <!-- 悬停显示的说明 -->
                    <div
                        class="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 w-80 p-3 bg-white rounded-sm shadow-lg border border-gray-200 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50 pointer-events-none group-hover:pointer-events-auto">
                        <div class="text-sm text-gray-700">
                            <div class="font-medium mb-2 text-blue-600">购买说明：</div>
                            <ul class="space-y-1 text-xs">
                                <li>• <strong>登录购买</strong>：订单将保存到您的账户，可在用户中心查看和管理</li>
                                <li>• <strong>免登录购买</strong>：直接支付获取内容，无需注册，购买后立即可用</li>
                                <li>• 两种方式都能正常获取完整的付费内容</li>
                            </ul>
                        </div>
                        <!-- 小箭头 -->
                        <div
                            class="absolute top-full left-1/2 transform -translate-x-1/2 w-0 h-0 border-l-4 border-r-4  -4  ransparent  -white">
                        </div>
                    </div>
                </div>
            </div>
            {/if}
            {elseif !$goods.paid_content_type}
            <!-- 没有付费内容的商品 -->
            <div class="flex-1 bg-gray-100 text-gray-600 py-3 px-6 rounded-sm text-center font-medium">
                <i class="fas fa-eye mr-2"></i>
                免费查看
            </div>
            {/if}
        </div>
    </div>
</div>